<template>
  <div class="m-order-list">
    <w-table :columns="columns">
      <!-- 商品列表 -->
      <tr v-for="item in list">
        <td>{{item.orderId}}</td>
        <td class="c-main">{{item.userPhone}}</td>
        <td class="time">
          <p>{{item.addTime}}</p>
        </td>
        <td>{{item.auditUserName}}</td>
        <td class="time">
          <p>{{item.auditDate}}</p>
        </td>
        <td class="c-high">￥{{item.refundPrice.toFixed(2)}}</td>
        <td class="operate" v-if="item.status == 0">
          <button @click="rejectAudit(item)">审核拒绝</button>
          <button @click="passAudit(item)">审核通过</button>
          <button @click="$router.push(`/refund/${item.orderFormId}`)">查看详情</button>
        </td>
        <td class="operate" v-if="item.status == 1">
          <button>已同意退款</button>
          <button @click="$router.push(`/refund/${item.orderFormId}`)">查看详情</button>
        </td>
        <td class="operate" v-if="item.status == 2">
          <button>已拒绝退款</button>
          <button @click="$router.push(`/refund/${item.orderFormId}`)">查看详情</button>
        </td>
      </tr>
      <tr v-if="!list || list.length == 0"><td colspan="7">暂无数据</td></tr>
    </w-table>
    <!-- 审核弹框 -->
    <div class="popup">
      <w-panel-fixed-wrap class="m-refund" width="442px" height="248px" v-model="showPanel" @on-cancel="onCancel" @on-confirm="onConfirm" title="提示" :confirm-text="confirmText">
        <div class="form-horizontal">
          <w-form-group v-if="status == 'reject'">
            <w-label class="col-sm-5" :must="true">请备注拒绝理由：</w-label>
            <w-input type="textarea" v-model="reason" :maxlength="50" class="col-sm-5" :validate="false"></w-input>
          </w-form-group>
          <w-form-group v-else>
            <w-label class="col-sm-6" :must="false">是否确认退款？</w-label>
          </w-form-group>
        </div>
      </w-panel-fixed-wrap>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 表格头
        columns: [
          {title: '订单编号'},
          {title: '买家手机'},
          {title: '申请时间'},
          {title: '审核人'},
          {title: '审核时间'},
          {title: '退款金额'},
          {title: '操作'}
        ],

        // 是否展示panel
        showPanel: false,

        // 当前编辑的对象
        editItem: '',

        // 当前状态
        status: 'pass',

        // 拒绝理由
        reason: ''
      }
    },
    computed: {
      confirmText() {
        if (this.status == 'pass') {
          return '确认退款'
        }
        return '提交'
      }
    },
    props: {
      list: {
        type: Array,
        default: () => { return [] }
      }
    },
    methods: {
      // 确认发货
      onDeliver() {
        this.$children[1].fixedPanel = true
      },

      // 取消弹框确认
      onCancel() {
        this.showPanel = false
      },

      // 弹出框确认
      onConfirm() {
        // 如果当前理由没有填写
        if (!this.reason && this.status == 'reject') {
          this.$toast('请填写拒绝理由')
          return
        }

        // 隐藏弹框
        this.showPanel = false

        // 先上级发送请求
        this.$emit(this.status, {item: this.editItem, reason: this.reason})
      },

      /**
       * 拒绝审核操作
       *
       * @param { Object } item 当前操作的对象
       */
      rejectAudit(item) {
        // 保存当前编辑的数据
        this.editItem = item

        // 设置状态为拒绝
        this.status = 'reject'

        // 清空理由
        this.reason = ''

        // 展示弹框
        this.showPanel = true
      },

      /**
       * 通过审核操作
       *
       * @param { Object } item 当前操作的对象
       */
      passAudit(item) {
        // 保存当前编辑的数据
        this.editItem = item

        // 设置状态为通过
        this.status = 'pass'

        // 展示弹框
        this.showPanel = true
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../scss/_var.scss';
  .m-order-list {
    margin-top: 30px;
    button {
      color: $color-main;
    }
  }
</style>